import React, {useEffect, useState} from "react";
import FlvAudioPlayer from "./flvAudioPlayer";
import {Card, Spin} from "antd";


let flvAudioPlayer
const Wave = ({url, colors = ['#00f0f0'], width, mute}) => {
    const [loading, setLoading] = useState(true)
    useEffect(() => {
        flvAudioPlayer = new FlvAudioPlayer({
            setLoading: setLoading,
            url,
            mountId: 'wave-canvas',
            height: 150,
            colors,
            debug: false
        });
        flvAudioPlayer.setVolume(mute ? 0 : 1)
        return () => {
            console.log('audio destory')
            flvAudioPlayer.destroy()
        }

    }, [url])
    useEffect(() => {
        flvAudioPlayer.setVolume(mute ? 0 : 1)
    }, [mute])

    return (
        <>
            {/*<Card loading={true} style={{width: width, height: '300px'}}>

			</Card>*/}
            <Spin size={"large"} spinning={loading}>
                <canvas id="wave-canvas" width={width} height="300"/>
            </Spin>
        </>

    )
}
export default React.memo(Wave)
